/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:42:41
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-12 15:34:02
 */

'use strict';

(function() {

	var Y = window.Y || {}


	var util = {

		getNumByRate: function(w, rate) {

			if (typeof rate === 'string' && rate.indexOf('%')) {

				return w * Number(rate.replace('%', '')) / 100
			} else if (typeof rate === 'string' && rate.indexOf('px')) {

				return Number(rate.replace('px', ''))
			} else {

				return Number(rafte)
			}
		},
		getTextSize: function(text, style) {

			var span, position, width, height

			span = document.createElement('span')

			span.innerText = text

			for (var key in style) {

				span.style[key] = style[key]
			}

			document.body.appendChild(span)

			position = span.getBoundingClientRect()

			width = position.width

			height = position.height

			document.body.removeChild(span)

			return {

				width: width,
				height: height
			}
		}
	}

	Y.one = function(setting) {


		var width, height, selector, radius, colorset, center, innerR, outerR, series, centerX, centerY, startA, endA,
			dom, position, arc, pie, translate, endAngle, sum,
			name, value

		var svg, content, left, right

		var leftStartA = -Math.PI, rightStartA = 0, leftEndA = 0, rightEndA = 2 * Math.PI

		selector = setting.selector
		dom = document.querySelector(selector)
		position = dom.getBoundingClientRect()
		width = position.width
		height = position.height
		radius = setting.radius
		center = setting.center
		colorset = setting.colorset
		outerR = util.getNumByRate(width, radius[0])
		innerR = util.getNumByRate(width, radius[1])
		centerX = util.getNumByRate(width, center[0])
		centerY = util.getNumByRate(height, center[1])
		translate = centerX + ',' + centerY
		startA = 0
		endA = 2 * Math.PI
		series = setting.series
		name =  series[0].data[0].name,
		sum = d3.sum(series[0].data, function(d, i) {

			return d['value']
		})
		value =  (series[0].data[0].value * 100 / sum).toFixed(0)+ '%'
		arc = d3.svg.arc()
			.innerRadius(innerR)
			.outerRadius(outerR)

		pie = d3.layout.pie()
			.value(function(d, i) {

				return Number(d.value)
			})
			.sort(null)
			.startAngle(startA)
			.endAngle(endA)

		svg = d3.select(selector)
			.append('svg')
			.attr('width', width)
			.attr('height', height)


		content = svg.append('g')
			.attr('transform', 'translate(' + translate + ')')


		//两色的环
		content.selectAll('.arc')
			.data(pie(series[0].data))
			.enter()
			.append('g')
			.append('path')
			.attr('fill', function(d, i) {

				return colorset[i]
			})
			.transition()
			.duration(2000)
			.attrTween('d', function(d, i) {

				if (i === 0) {

					endAngle = d.endAngle
				}
				// d.innerRadius = 0
				var i = d3.interpolate({
					startAngle: startA,
					endAngle: endA
				}, d)
				return function(t) {
					return arc(i(t))
				}
			})


		left = d3.svg.arc()
			.innerRadius(0)
			.outerRadius((outerR - innerR) / 2)
			.startAngle(leftStartA)
			.endAngle(leftEndA)

		right = d3.svg.arc()
			.innerRadius(0)
			.outerRadius((outerR - innerR) / 2)
			.startAngle(rightStartA)
			.endAngle(rightEndA)

		//环左边的圆
		content.append('g')
			.append('path')
			.attr('transform', 'translate(0, ' + (-(innerR + outerR) / 2) + ')')
			.attr('fill', colorset[0])
			.transition()
			.duration(2000)
			.attr('d', left)
			//环右边的圆
		content.append('g')
			.append('path')
			.attr('transform', 'translate(0, ' + (-(innerR + outerR) / 2) + ')')
			.attr('fill', colorset[0])
			.transition()
			// .delay(10)
			.duration(2000)
			.attr('d', right)
			.attrTween('transform', function(d) {

				var j = d3.interpolate({
					endAngle: 0
				}, {
					endAngle: endAngle
				})
				return function(t) {

					var x = ((innerR + outerR) / 2) * Math.cos(j(t).endAngle - Math.PI / 2)
					var y = ((innerR + outerR) / 2) * Math.sin(j(t).endAngle - Math.PI / 2)

					return 'translate(' + x + ',' + y + ')';
				}
			})

		//环左边中间的白色环
		content.append('g')
			.append('circle')
			.attr('cx', 0)
			.attr('cy', (-(innerR + outerR) / 2))
			.attr('fill', '#fff')
			.attr('r', (outerR - innerR) * 0.6 / 2)

		//环中间的文字
		content.append('text')
			.text(name)
			.attr('text-anchor', 'middle')
			.attr('y', - util.getTextSize(name, series[0].nameStyle).height  * 2/ 3 )
			.style(series[0].nameStyle)

		content.append('text')
			.text(function() {

				return  value
			})
			.attr('text-anchor', 'middle')
			.attr('y', util.getTextSize(value, series[0].valueStyle).height * 2/3)
			.style(series[0].valueStyle)


	}


	window.Y = Y
}())